 <template>
    <div class="qrcode-wrapper">
        <centerHeader/>

        <div class="qrcode-wrap">
            <div class="top-wrap">
                <p class="title-txt">
                    <span class="title-01">我的推广码</span>
                </p>
            </div>

            <div class="main-wrap">
                <div class="img-wrap">
                    <!-- <img class="ad-img" src="@/assets/images/qrcode_01.png"> -->
                    <canvas id="msg" class="ad-img"></canvas>
                </div>

                <div class="qrcode-box">
                    <p class="qrcode-txt">{{user_info.my_invite_code}}</p>
                </div>
            </div>
        </div>

        <centerFooter/>
    </div>
</template>

 <script type="text/ecmascript-6">
import centerHeader from "@/views/center/components/centerHeader";
import centerFooter from "@/views/center/components/centerFooter";
import constant from "@/utils/constant.js";
// 引用API文件
import http from "@/utils/http.js";
import wx from "weixin-jsapi";

import QRCode from "qrcode";

export default {
  name: "qrcode",
  data() {
    return {
      user_info: {}
    };
  },
  components: {
    centerHeader,
    centerFooter
  },
  methods: {
    userinfo() {
      http.get(this, {
        url: "ucenter/user_info",
        data: {
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("用户信息:", data);
          if (data.status == 1) {
            this.user_info = data.info;

            // 获取页面的canvas
            var msg = document.getElementById("msg");
            // 将获取到的数据（val）画到msg（canvas）上
            QRCode.toCanvas(
              msg,
              "http://" +
                document.domain +
                "/login/spreadLogin?invite_code=" +
                this.user_info.my_invite_code,
              function(error) {}
            );
            //this.share();
          } else {
          }
        }
      });
    },
    storeinfo() {
      http.get(this, {
        url: "store/store_info",
        data: {
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("门店信息:", data);
          if (data.status == 1) {
            this.user_info = data.info;
            this.user_type = "store";
            this.user_info.my_invite_code = data.info.store_my_invite_code;
            //this.share();
            // this.total_commission = data.info.total_commission;
            // this.store_count = data.info.store_count;
            localStorage.setItem("user_name", data.info.store_name);
            //localStorage.setItem("user_head", data.info.headimgurl);
            localStorage.setItem("user_type", "store");

            var msg = document.getElementById("msg");
            // 将获取到的数据（val）画到msg（canvas）上
            QRCode.toCanvas(
              msg,
              "http://" +
                document.domain +
                "/login/spreadLogin?invite_code=" +
                this.user_info.my_invite_code,
              function(error) {
                console.log(error);
              }
            );
          } else {
          }
        }
      });
    },
    share() {
      let that = this;

      wx.ready(function() {
        //   wx.checkJsApi({
        //     jsApiList: ["chooseImage"], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        //     success: function(res) {
        //       console.log(res);
        //       // 以键值对的形式返回，可用的api值true，不可用为false
        //       // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        //     }
        //   });
        var shareUrl =
          "http://" +
          document.domain +
          "/login/spreadLogin?invite_code=" +
          that.user_info.my_invite_code;
        console.log(shareUrl);
        var obj = {
          //朋友圈
          title: "还美整形医院", // 分享标题
          desc: "", // 分享描述
          link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          // 该链接是重定向链接，因为需要获取用户code，但是该链接又无法直接写微信获取code的链接，
          // 所以需要点击后重新加载新的页面，来实现重定向，重新打开获取code的微信链接，实现获取用户信息的功能；
          imgUrl:
            "http://" + document.domain + require("@/assets/images/logo1.png"), // 分享图标
          fail: function(res) {
            alert(JSON.stringify(res));
          },
          success: function(res) {}
        };
        var obj1 = {
          //好友
          title: "还美整形医院", // 分享标题
          desc: "", // 分享描述
          link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          // 该链接是重定向链接，因为需要获取用户code，但是该链接又无法直接写微信获取code的链接，
          // 所以需要点击后重新加载新的页面，来实现重定向，重新打开获取code的微信链接，实现获取用户信息的功能；
          imgUrl:
            "http://" + document.domain + require("@/assets/images/logo1.png"), // 分享图标
          fail: function(res) {
            alert(JSON.stringify(res));
          }
        };
        // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareAppMessage(obj1);

        // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareTimeline(obj);

        // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareQQ(obj);

        // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareWeibo(obj);

        // 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口
        wx.onMenuShareQZone(obj);
      });
    },
    wx_config() {
      let url = window.location.href.split("#")[0];
      http.post(this, {
        url: "pay/wx_config",
        data: {
          url: url
        },
        dataType: "json",
        success: function(data) {
          console.log(data);
          if (data.status == 1) {
            let wdata = data.info;
            wx.config({
              appId: wdata.appId, // 必填，公众号的唯一标识
              timestamp: wdata.timestamp, // 必填，生成签名的时间戳
              nonceStr: wdata.nonceStr, // 必填，生成签名的随机串
              signature: wdata.signature, // 必填，签名，见附录1
              jsApiList: [
                "onMenuShareTimeline",
                "onMenuShareAppMessage",
                "onMenuShareQQ",
                "onMenuShareWeibo",
                "onMenuShareQZone"
              ]
            });
          } else {
            this.$message({
              message: data.info,
              type: "error"
            });
          }
        }
      });
    }
  },
  created() {},
  mounted() {},
  activated() {
    //this.wx_config();
    let user_type = localStorage.getItem("user_type");
    if (user_type == "store") {
      this.storeinfo();
    } else {
      this.userinfo();
    }
  }
};
</script>

 <style scoped lang="scss">
.qrcode-wrapper {
}

.top-wrap {
  $letHeight: 1.3rem;

  .title-txt {
    height: $letHeight;
    line-height: $letHeight;
    text-align: center;
    background-color: $c-white-light;

    span {
      color: $c-mainC;
      display: inline-block;
      line-height: $letHeight;
      vertical-align: middle;

      &.title-01 {
        font-size: 0.38rem;
      }
    }
  }
}

.main-wrap {
  @extend .cmm-border;
}

.img-wrap {
  width: 5rem;
  height: 5rem;
  margin: 0.4rem auto;
  overflow: hidden;
  position: relative;
  padding: 0.22rem;
  margin-top: 0;

  .ad-img {
    @extend .cmm-translateXY;
    width: 100%;
  }
}

.qrcode-box {
  text-align: center;
  width: 100%;
  .qrcode-txt {
    width: 5.15rem;
    border-radius: 0.8rem;
    background-color: $c-danger;
    font-size: 0.52rem;
    color: $c-white-light;
    $letHeight: 0.6rem;
    height: $letHeight;
    line-height: $letHeight;
    text-align: center;
    margin: 0.48rem auto;
    display: inline-block;
    letter-spacing: 0.1rem;
    font-weight: bold;
  }
}
</style>
